<template>
  <!-- 地图 -->
  <div>
    <baidu-map
      class="bm-view"
      :zoom="zoom"
      :center="center"
      inertial-dragging
      @ready="mapReady"
      :scroll-wheel-zoom="true"
      @click="handleMapClick"
    >
      <bm-marker :position="{ lng: this.center.lng, lat: this.center.lat }">
        <bm-label
          content="徐闻县"
          :labelStyle="{
            color: '#0091fe',
            fontSize: '20px',
            border: '1px solid #0091fe',
          }"
          :offset="{ width: -35, height: 30 }"
        />
      </bm-marker>

      <!-- 行政区划 -->
      <bm-boundary
        name="广东省徐闻县"
        :strokeWeight="2"
        strokeColor="rgba(67, 215, 181, 1)"
        fillColor="rgba(67, 215, 181, 0.5)"
      ></bm-boundary>
    </baidu-map>
  </div>
</template>

<script>
import {
  BaiduMap,
  BmControl,
  BmView,
  BmAutoComplete,
  BmLocalSearch,
  BmMarker,
  BmGeolocation,
  BmlLushu,
} from "vue-baidu-map";
export default {
  components: {
    BaiduMap,
    BmControl,
    BmView,
    BmAutoComplete,
    BmLocalSearch,
    BmMarker,
    BmGeolocation,
    BmlLushu,
  },
  data() {
    return {
      //定位位置信息
      center: {
        lng: 110.17675,
        lat: 20.325489,
      },
      zoom: 11,
      polylinePath: [
        { lng: 116.404, lat: 39.915 },
        { lng: 116.405, lat: 39.92 },
        { lng: 116.423493, lat: 39.907445 },
      ],
      startPoint: { lng: 116.404, lat: 39.915 },
    };
  },
  methods: {
    //地图加载后的回调
    mapReady({ BMap, map }) {
      console.log(map);

      map.setMapStyle({ style: "grassgreen" });
    },

    // 地图点击获取经纬度
    handleMapClick(e) {
      this.zoom = e.target.getZoom();

      // 创建地址解析器的实例
      let geocoder = new BMap.Geocoder();
      geocoder.getLocation(e.point, (rs) => {
        console.log(e.point.lng, e.point.lat);
      });
    },
  },
};
</script>

<style scoped>
/* 给个宽高 */
.bm-view {
  height: 100%;
  width: 100%;
}
/* 去除百度地图的图标 根据实际情况看是否要加样式穿透(::v-deep) */
::v-deep .anchorBL {
  display: none !important;
}
</style>
